// 通知公告列表页面
import Badge from "@/components/Badge";
import IconFont from "@/components/iconfont";
import {
  InfiniteScroll,
  PullToRefresh,
  InfiniteScrollInstance,
  Divider,
  Overlay,
} from "@antmjs/vantui";
import { View } from "@tarojs/components";
import React, { useState, useRef } from "react";
import AnnouncementDetail from "./AnnouncementDetail";

const mockInfos = async (): Promise<Record<string, any>[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const _resultData: Record<string, any> = [];
      for (let i = 0; i < 10; i++) {
        _resultData.push({
          id: Math.round(Math.random() * (10000 - 1)) + 1,
          type: 0,
          title:
            "[公告]3.1.2版本上线，报备流程等多个功能优化，报备流程等多个功能优。报备流程等多个功能优",
          content:
            "亲爱的企业用户你们好！3.1.2版本上线，报备流程等多个功能优化，报备流程等多个功能优。报备流程等多个功能优",
          dateTime: "2023-01-01",
        });
      }
      resolve(_resultData as any);
    }, 1000);
  });
};

const Announcement: React.FC = () => {
  const [data, setdata] = useState<Record<string, any>[]>([]);
  const infiniteScrollInstance = useRef<InfiniteScrollInstance>();

  // 显示详情
  const [isShowAnnouncementDetail, setIsShowAnnouncementDetail] =
    useState<boolean>(false);

  // 当前选择的通知公告ID
  const [curSelectedAnnouncementId, setCurSelectedAnnouncementId] = useState<
    string | number
  >();

  const loadMore = async () => {
    return new Promise(async (resolve) => {
      const result = await mockInfos();
      const newData = [...data, ...result];
      setdata(newData);
      // 以下是简单的模拟请求，正常请求请按条件执行`resolve('complete')`
      resolve(newData.length > 60 ? "complete" : "loading");
    });
  };

  const onRefresh = () => {
    return new Promise(async (resolve) => {
      const reslult = await mockInfos();
      setdata(reslult);
      infiniteScrollInstance?.current?.reset();
      resolve(true);
    });
  };

  return (
    <>
      <PullToRefresh
        onRefresh={onRefresh as () => Promise<undefined>}
        catchMove
      >
        <View className="relative px-2 py-6">
          {data.map((item, index) => (
            <>
              <View
                className="flex flex-row items-center w-full gap-2 flex-nowrap"
                key={`announcement-item-${index}`}
                onClick={() => {
                  setCurSelectedAnnouncementId(item.id);
                  setIsShowAnnouncementDetail(true);
                }}
              >
                <View className="w-[36px] mr-2">
                  <Badge dot>
                    <IconFont name="remind" size={48} color="#666" />
                  </Badge>
                </View>
                <View className="flex-1 truncate">
                  <View className="w-full h-[36px] truncate mb-1">
                    {item.title}
                  </View>
                  <View className="w-full h-[36px] truncate text-[24px] text-slate-500">
                    {item.content}
                  </View>
                </View>
                <View className="w-[140px] text-xs text-slate-400">
                  {item.dateTime}
                </View>
              </View>
              <Divider hairline />
            </>
          ))}
          <InfiniteScroll
            loadMore={
              loadMore as () => Promise<"complete" | "loading" | "error">
            }
            ref={infiniteScrollInstance}
          />
        </View>
      </PullToRefresh>
      {/* 遮罩弹出层，显示详情 */}
      <Overlay
        show={isShowAnnouncementDetail}
        lockScroll
        onClick={() => setIsShowAnnouncementDetail(false)}
        className="relative flex flex-row items-center justify-center flex-nowrap"
      >
        <AnnouncementDetail announcementId={curSelectedAnnouncementId!} />
      </Overlay>
    </>
  );
};

export default Announcement;
